<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        .img-box {
            position: relative;
            width: 665px;
            height: 400px;
            background: url(./图片九宫格/88.png) no-repeat;
            background-size: contain;
        }
        .img-box::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 665px;
            height: 400px;
            z-index: 1;
            background-color: #000;

            mask: radial-gradient(
                circle,
                transparent 0%,
                rgba(0,0,0,0.2) 20%,
                rgba(0,0,0,1) 40%,
                #000 100%
            );
            -webkit-mask: radial-gradient(
                circle,
                transparent 0%,
                rgba(0,0,0,0.2) 20%,
                rgba(0,0,0,1) 40%,
                #000 100%
            );
        }
        .img-box::after {
            --radius: 20%;
            --x: 330px;
            --y: 200px;
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 665px;
            height: 400px;
            z-index: 1;
            background-color: #000;
            transition: --radius 300ms ease-in;
                    
            mask: radial-gradient(
                circle at var(--x) var(--y),
                transparent 0%,
                rgba(0,0,0,0.2) var(--radius),
                rgba(0,0,0,1) calc(var(--radius) + 15%),
                #000 100%
            );
        -webkit-mask: radial-gradient(
            circle at var(--x) var(--y),
            transparent 0%,
            rgba(0,0,0,0.2) var(--radius),
            rgba(0,0,0,1) calc(var(--radius) + 15%),
            #000 100%
        );
        }
        .img-box-big::after {
            --radius: 15%;
        }
        .img-box-small::after {
            --radius: 5%;
            transition-duration: 100ms;
        }
        .img-box {
          --x: 330px;
          --y: 200px;
        }
        .img-box::after {
          --radius: 20%;
          --x: inherit;
          --y: inherit;
        }
    </style>

</head>

<body>
    <div class="img-box" id="imgBox"></div>
    <script>
        const imgBox = document.getElementById('imgBox');
        
        function moveLightRing(x, y) {
        // 跟随移动
        }

        imgBox.addEventListener('mouseenter', (e) => {
            moveLightRing(e.offsetX, e.offsetY);
        });
        imgBox.addEventListener('mousemove', (e) => {
            moveLightRing(e.offsetX, e.offsetY);
        });
        imgBox.addEventListener('mouseout', (e) => {
            moveLightRing(e.offsetX, e.offsetY);
        });
     
        function moveLightRing(x, y) {
            // 短时间内的短距离移动，不算移动
            const newTime = new Date().getTime();
            if (lastMove.time + 10 > newTime
                && lastMove.x + 10 > x
                && lastMove.y + 10 > y
            ) {
                return;
            }
            // 记录上一次的移动情况
            lastMove.time = newTime;
            lastMove.x = x;
            lastMove.y = y;
        
            // 移动，设置样式
            if (imgBox.className.indexOf('img-box-small') === -1) {
                imgBox.className = 'img-box img-box-small';
            }
            // TODO: 修改after伪元素样式的--x， --y的值
        
            // 持续移动，不设置。不移动了，100ms后，设置光圈变大。
            clearTimeout(st);
            st = setTimeout(() => {
                imgBox.className = 'img-box img-box-big';
            }, 100);
        }
        function moveLightRing(x, y) {
          // 修改父节点的自定义样式的值为当前位置
          imgBox.style.setProperty('--x', x + 'px');
          imgBox.style.setProperty('--y', y + 'px');
        }

        
    </script>
</body>

</html>